require('./base-css.js');
require('../css/divider.css');
var $ = require('jquery');
var React = require('react');
var ReactDOM = require('react-dom');

var util = require('./util');

util.addDragEvent('.w-divider', function(target, x, y) {
  target = target.parent();
  var con = target.parent();
  var isVertical = !con.hasClass('box');
  var isRight = target.hasClass('w-divider-right');
  var size = isVertical ? target[0].offsetHeight - (isRight ? y : -y) : target[0].offsetWidth - (isRight ? x : -x);
  var conSize = con[0][isVertical ? 'offsetHeight' : 'offsetWidth'];
  target[isVertical ? 'height' : 'width'](Math.min(conSize - 5, Math.max(5, size)));
});

var Divider = React.createClass({
  componentDidMount: function() {
    var divider = ReactDOM.findDOMNode(this.refs.divider);
    var vertical = util.getBoolean(this.props.vertical);
    var prop = vertical ? 'height' : 'width';
    if (this._leftWidth > 0) {
      $(divider).children('.w-divider-left')[prop](this._leftWidth);
      return;
    }

    var rightWidth = parseInt(this.props.rightWidth, 10);
    if (!(rightWidth > 0)) {
      rightWidth = (vertical ? divider.offsetHeight : divider.offsetWidth) / 2;
    }

    $(divider).children('.w-divider-right')[prop](Math.max(rightWidth, 5));
  },
  render: function() {
    var vertical = util.getBoolean(this.props.vertical);
    var divider = <div className="w-divider"></div>;
    var leftWidth = parseInt(this.props.leftWidth, 10);
    if (leftWidth > 0) {
      this._leftWidth = leftWidth;
    } else {
      leftWidth = 0;
    }

    return (
        <div ref="divider" className={(vertical ? 'orient-vertical-box' : 'box') + ' fill w-divider-con ' + (this.props.className || '')
            + (util.getBoolean(this.props.hide) ? ' hide' : '')}>
          <div className={(leftWidth ? '' : 'fill ') + 'w-divider-left orient-vertical-box ' + (this.props.leftClassName || '')}>
            {leftWidth ? divider : ''}
            {this.props.children[0]}
          </div>
          <div className={(leftWidth ? 'fill ' : '') + 'w-divider-right orient-vertical-box ' + (this.props.rightClassName || '')}>
            {leftWidth ? '' : divider}
            {this.props.children[1]}
          </div>
        </div>
    );
  }
});

module.exports = Divider;
